<template>
    <div class="demo">
      <template>
        <div v-if="mode === 'edit'">
          <el-input v-model="emailStr" placeholder="请输入邮箱" @input="check" :disabled="disabled"></el-input>
          <div class="el-form-item__error" v-if="emailError">邮箱格式不正确！</div>
        </div>
        <div v-else>{{ value }}</div>
      </template>
    </div>
  </template>
  
  <script>
  //必须引入这个，否则数据不会回传
  import datasource from '../../mixins/steps-datasource'
  export default {
    name: 'pm-email',
    mixins: [datasource],
    components: {},
    props: {
      value:{},
      mode: {
        default: "edit", // 编辑模式和 edit， 展示模式 view
      },
      readonly: {
        type: Boolean,
        default: false,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        emailStr: '',
        emailError: ''
      }
    },
    watch: {},
    created() {},
    mounted() {
      console.log(this.value,"this.value");
      if(this.value){
      this.emailStr = this.value;
      if(this.mode == 'view'){
          this.disabled = true;
      }
    }
    },
    methods: {
      check(){
        this.$emit("input", this.emailStr)
        console.log(this.emailStr,"this.emailStr");
        var re = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
        var result = re.test(this.emailStr); 
        if(!result & this.emailStr!=='') {
          this.emailError = true
        } else {
          this.emailError = false
        }
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .demo {
    width: 100%;
  }
  </style>